import './table1.less'
import React, { useState } from 'react';
import { Pagination, Checkbox } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox'
import { proof } from '@/services/proof/proof'

//多选框

function Table1({ syncSelectedColumn }) {
    const [proofData, setProofData] = useState<[proof]>([{}]);
    proofData.push(
        { id: 0, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 1, check: 1, red: 0, finish: 1, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 2, check: 1, red: 0, finish: 1, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 3, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 4, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 5, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 6, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 7, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 8, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 9, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 10, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 11, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 12, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 13, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] }
    )

    const [checkeAll, setCheckeAll] = useState(false)
    const [tempList, setTempList] = useState([...proofData])
    const Checkedll = (e: CheckboxChangeEvent) => {
        console.log(`checkedall = ${e.target.checked}`);
        setCheckeAll(e.target.checked)
        const temp = tempList.map(item => item.checked = e.target.checked)
        setTempList(tempList)
        if (e.target.checked) {
            syncSelectedColumn(tempList)
        } else {
            syncSelectedColumn([])
        }
    }


    return (
        <div className='table1'>
            <div className="thead flex">
                <Checkbox style={{ width: '5%' }} checked={checkeAll} onChange={Checkedll}></Checkbox>
                <div style={{ width: '15%' }}>摘要信息</div>
                <div style={{ width: '15%' }}>科目名称</div>
                <div style={{ width: '15%' }}>借方金额</div>
                <div style={{ width: '15%' }}>贷方金额</div>
                <div style={{ width: '35%' }}>操作</div>
            </div>
            <div className='tbody flex'>
                {proofData.map((v, i) => {
                    if (! e.target.checked) {
                        setCheckeAll(e.target.checked)
                    }
                        console.log( `checked = ${e.target.checked}` );
                        const newList = [...tempList]
                        newList[i].checked = e.target.checked
                        const temp = newList.filter(v => v.checked)  || []
                        syncSelectedColumn(temp)
                        if (temp.length === newList.length) {
                            setCheckeAll(true)
                        }
                        setTempList(newList);
                    

                    return (
                        <div>
                            <div>
                                <div>
                                    <Checkbox checked={v.checked} onChange={(e) => { onChange(e, i) }}></Checkbox>
                                    日期：{v.date} &nbsp;&nbsp;&nbsp;凭证号：{v.fontNum} &nbsp;&nbsp;&nbsp;附件：<span>{v.moreFile}</span> &nbsp;&nbsp;&nbsp;审核状态：<span>{v.state}</span>
                                </div>
                                <div className='operate'>
                                    <div className='TBbtn'>修改</div><div className='TBbtn'>复制</div><div className='TBbtn'>打印</div><div className='TBbtn'>冲红</div><div className='TBbtn'>删除</div>
                                </div>
                            </div>
                            <div>
                                <div>{v.keyWord}</div><div>{v.proName}</div><div>{v.getMoney}</div><div>{v.sendMoney}</div>
                            </div>
                        </div>
                    )
                })}


                {/*  */}
            </div>
            {/* 表格 */}
            {/* <table>
                <thead>
                    <th className='thtd' style={{ width: '1%', height: 30 }}>
                        1
                    </th>
                    {tHead.map((v, i) => <th className='thtd'>
                        {v}
                    </th>)}

                </thead>
                {proofData.map((v, i) =>
                    <tbody>
                        <tr style={{ height: '70px', lineHeight: '70px' }}>
                            <td colSpan={tHead.length} style={{ textAlign: 'left', fontWeight: 600 }}>
                                <div style={{ width: '100%', height: '40px', lineHeight: '40px', marginTop: '15px', background: '#F8F8F8' }}>
                                    <span style={{ width: '9%' }}>2</span>
                                    日期：{v.date} &nbsp;&nbsp;&nbsp;凭证号：{v.fontNum} &nbsp;&nbsp;&nbsp;附件：<span>{v.moreFile}</span> &nbsp;&nbsp;&nbsp;审核状态：<span>{v.state}</span>
                                </div>
                            </td>
                            <td>
                                <div className='operate'>
                                    <div className='TBbtn'>修改</div><div className='TBbtn'>复制</div><div className='TBbtn'>打印</div><div className='TBbtn'>冲红</div><div className='TBbtn'>删除</div>
                                </div>
                            </td>

                        </tr>
                        <tr style={{ borderBottom: '#EDF0F6 solid 1px' }}>
                            <td>&nbsp;</td>
                            <td >{v.keyWord[0]}</td><td>{v.proName[0]}</td>
                            <td>{v.getMoney[0]}</td><td>{v.sendMoney[0]}</td>

                            <td>&nbsp;</td>
                        </tr>
                        <tr style={{ borderBottom: '#EDF0F6 solid 1px' }}>
                            <td>&nbsp;</td>
                            <td>{v.keyWord[1]}</td><td>{v.proName[1]}</td>
                            <td>{v.getMoney[1]}</td><td>{v.sendMoney[1]}</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr style={{ borderBottom: '#EDF0F6 solid 1px' }}>
                            <td colSpan={3} style={{ textAlign: 'right' }}>合计：</td>
                            <td>{v.getMoney[0] + v.getMoney[1]}</td><td>{v.sendMoney[0] + v.sendMoney[1]}</td>
                            <td>&nbsp;</td>
                        </tr>
                    </tbody>)}
                <tfoot>
                    <td colSpan={tHead.length} style={{ textAlign: 'center' }}>
                        <Pagination
                            onChange={onchange}
                            onShowSizeChange={(current, size) => {
                                setPageSize(size)
                                setCurrent(current)
                                console.log(current);
                                console.log(size);
                            }}
                            total={proofData.length}
                            showTotal={(total) => `当前合计,共 ${proofData.length} 条记录`}
                            pageSize={pageSize}
                        />
                    </td>
                </tfoot>
            </table> */}
        </div>
    )
}
export default Table1